<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入chapter组件样式 -->
    <link rel="stylesheet" href="../../widget/components/chapter/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
		 */
      .chapter-hr {
        height: 1px;
        background-color: rgb(220, 220, 220);
      }

      /* 刷新按钮样式 换成图标后删除 */
      .chapter-replay {
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
      }
      .chapter-replay-img {
        width: 100%;
        height: 100%;
      }

      /* 控制刷新过渡 */
      .notransform {
        transition: none;
        transform: rotate(0deg);
      }

      .transform {
        transition: 1s;
        transform: rotate(-720deg);
      }

      /* 目录样式 */
      [class*='van-hairline']::after {
        border: none;
      }
      .van-cell:not(:last-child)::after {
        border: none;
      }
      .van-collapse-item {
        min-height: 0.96rem;
        line-height: 0.96rem;
        padding: 0 0.32rem;
        background-color: #fff;
      }
      .van-collapse-item__title {
        height: 100%;
        line-height: 0.96rem;
        font-size: 0.3rem;
        color: rgba(50, 50, 51, 1);
        border-bottom: 1px solid rgba(200, 200, 200, 0.2);
      }

      .chapter-chapter-icon {
        width: 0.48rem;
        height: 0.48rem;
        vertical-align: middle;
        margin-right: 0.24rem;
      }

      .chater-have-level {
        padding: 0 0.32rem 0 0.22rem;
        background-color: #fff;
      }

      /* 右边箭头的样式 */
      .van-icon-arrow {
        /* line-height: 0.96rem; */

        height: 0.96rem;
        display: flex;
        line-height: normal;
        align-items: center;
      }
      .van-collapse-item__title .van-cell__right-icon::before {
        transform: rotate(0deg);
      }

      .van-collapse-item__title--expanded .van-cell__right-icon::before {
        transform: rotate(90deg);
      }

      /* 去除组件的padding */
      .van-cell {
        padding: 0;
      }

      .van-collapse-item__content {
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- *********************** 头 *******************************-->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">{{ title }}</div>
            <div class="header-right">
              <!-- 此处需换成 icon -->
              <div
                class="chapter-replay"
                :class="{notransform: noTransform,transform: transform}"
                @click="replay"
              >
                <img
                  class="chapter-replay-img"
                  src="./image/chapter/replay.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--************************** 内容 *************************-->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div class="chapter-hr"></div>
        <div v-if="showWhatType">
					
					
					
          <van-collapse v-model="firstActiveName" @change="change" accordion>
            <van-collapse-item
              v-for="(item, index) of chapterData"
              :name="String(index)"
              :key="index"
            >
						<div v-if="item.children.length > 0">
							<van-collapse  v-model="firstActiveName" @change="change" accordion>
							  <van-collapse-item
							    v-for="(childrenItem, childrenIndex) of item.children"
							    :name="String(childrenIndex)"
							    :key="childrenIndex"
							  >
							    <div slot="title">
							      <img
							        class="chapter-chapter-icon"
							        :src="'./image/chapter/'+idObj.typeid+'.png'"
							        alt=""
							      />{{childrenItem.chaptertitle}}
							    </div>
							    <div>
							      <zl-chapter
							        v-for="(items,i) of childrenItem.crds"
							        :item="items"
							        :num="i"
							        :key="i"
							        :is-show="isShowDo"
							        @click.native="goTo(items)"
							      ></zl-chapter>
							    </div>
							  </van-collapse-item>
							</van-collapse>
							<div slot="title">
							  <img
							    class="chapter-chapter-icon"
							    :src="'./image/chapter/'+idObj.typeid+'.png'"
							    alt=""
							  />{{ item.chaptertitle}}
							</div>
						</div>
						
						<div v-else>
							<div slot="title">
							  <img
							    class="chapter-chapter-icon"
							    :src="'./image/chapter/'+idObj.typeid+'.png'"
							    alt=""
							  />{{ item.chaptertitle}}
							</div>
							<div>
							  <zl-chapter
							    v-for="(items,i) of item.crds"
							    :item="items"
							    :num="i"
							    :key="i"
							    :is-show="isShowDo"
							    @click.native="goTo(items)"
							  ></zl-chapter>
							</div>
						</div>
              
            </van-collapse-item>
          </van-collapse>
        </div>
        <div v-else class="chater-have-level">
          <zl-chapter
            v-for="(item, index) of chapterData"
            :key="index"
            :item="item"
            :is-show="isShowDo"
            @click.native="goTo(item)"
          ></zl-chapter>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <!-- <script src="../../common/js/vue.min.js"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <!-- 引入chapter组件 -->
    <script src="../../widget/components/chapter/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      //  注册 Collapse 组件
      Vue.use(vant.Collapse).use(vant.CollapseItem)
      //  注册 Cell 组件
      Vue.use(vant.Cell).use(vant.CellGroup)
      Vue.use(vant.Toast)

      new Vue({
        el: '#app',
        components: {
          'zl-chapter': chapter
        },
        data: {
          // 控制显示几级的目录
          showWhatType: true,
          // 控制是否显示做了几题
          isShowDo: false,
          // 控制是从哪儿跳过去的 用来决定做题方式
          where: 1,
          // 头部标题
          title: '',
          // 控制刷新按钮旋转
          noTransform: true,
          // 控制刷新按钮过渡
          transform: false,
          // 控制手风琴展开的是哪个
          firstActiveName: '',
          //  章节练习数据
          chapterData: [],
          // 将请求数据需要的参数存起来 供刷新用
          idObj: {},
          queryObj: '',
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          goBack() {
            window.history.back(-1)
          },
          // 改变刷新按钮的class
          replay() {
            if (this.noTransform === true) {
              this.noTransform = false
              this.transform = true
              let deleArr = []
              // 刷新是将本地的相关试卷删除掉
              for (let item of this.chapterData) {
                // 是章节
                if (item.ischapter) {
                  for (let crdsItem of item.crds) {
                    deleArr.push(`id${crdsItem.id}2019`)
                  }
                } else {
                  //不是章节
                  deleArr.push(`id${item.id}2019`)
                }
              }
              // 将本地存储删除掉
              for (let item of deleArr) {
                window.localStorage.removeItem(item)
              }
              setTimeout(() => {
                this.noTransform = true
                this.transform = false
              }, 1000)
            }
          },
          // 手风琴展开项改变
          change(name) {
            let localObj = {}
            localObj[this.title] = name
            setLStorageObj(localObj)
          },

          goTo(items) {
            if (Number(items.isfree) === 0) {
              this.$toast('购买/激活当前科目下任意课程激活使用')
              return
            }
            if (Number(items.quescount) === 0) {
              this.$toast('当前试卷还未有题！')
              return
            }
            window.location.href = `./exercise.html?where=${this.where}&&id=${items.id}&&title=${items.title}&&queryObj=${this.queryObj}`
          }
        },
        created() {
          let queryObj = utils.getQuery(location.href)
          this.title = queryObj.title
          let idObj = {
            typeid: queryObj.typeid,
            cateid: queryObj.cateid
          }
          this.idObj = idObj
          // 将参数存起来 传给试卷  点击再考一次时跳回此页面
          this.queryObj = JSON.stringify(queryObj)
          // 判断是否显示做了几道题
          if (Number(queryObj.typeid) === 1) {
            this.isShowDo = true
            this.where = 0
          }
          examService.getCatalog(idObj).then(res => {
            if (!res.code) {
              this.chapterData = res
              this.isShowZLLoading = false
              // 判断是几级目录
              if (res[0].ischapter) {
                this.showWhatType = true
                // 判断上次用户展开的项，并且展开
                const activedObj = getLStorageObj([this.title])
                this.firstActiveName = activedObj[this.title]
              } else {
                this.showWhatType = false
              }
            }
          })
        }
      })
    </script>
  </body>
</html>
